/**
* 左边菜单
*/
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened
    class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
      Simple-Docker
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <i class="iconfont" :class="menu.icon"></i>
        <span class="titleFont">{{ menu.menuname }}</span>
      </template>
      <el-menu-item-group v-if="menu.menus != null">
        <el-menu-item v-for="chmenu in menu.menus" :index="'/' + chmenu.url" :key="chmenu.menuid">
          <i class="iconfont" :class="chmenu.icon"></i>
          <span>{{ chmenu.menuname }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { getUserInfo, getUserRole } from '../utils/util'
export default {
  name: 'leftnav',
  data() {
    return {
      userInfo: getUserInfo(),
      collapsed: false,
      allmenu: [],
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    var role = getUserRole()
    let superAdminMenu = {
      success: true,
      data: [
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '系统',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 11,
              icon: 'icon-news-manage',
              menuname: '首页',
              hasThird: 'N',
              url: 'home/Home',
            }, {
              menuid: 12,
              icon: 'icon-news-manage',
              menuname: '个人中心',
              hasThird: 'N',
              url: 'system/userCenter',
            }, {
              menuid: 13,
              icon: 'icon-news-manage',
              menuname: '系统设置',
              hasThird: 'N',
              url: '',
            }, {
              menuid: 14,
              icon: 'icon-news-manage',
              menuname: '测试中心',
              hasThird: 'N',
              url: 'home/Test',
            }
          ]
        }, {
          menuid: 2,
          icon: 'li-icon-xiangmuguanli',
          menuname: '主机管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 21,
              icon: 'icon-news-manage',
              menuname: 'Docker主机管理',
              hasThird: 'N',
              url: 'client/dockerHostManagement',
            },
            {
              menuid: 22,
              icon: 'icon-news-manage',
              menuname: 'Docker信息',
              hasThird: 'N',
              url: 'client/dockerClientInfo?key=0',
            }
          ],
        }, {
          menuid: 3,
          icon: 'li-icon-xiangmuguanli',
          menuname: '容器管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 31,
              icon: 'icon-news-manage',
              menuname: '容器管理',
              hasThird: 'N',
              url: 'container/containersManagement',
            }, {
              menuid: 32,
              icon: 'icon-news-manage',
              menuname: '容器信息',
              hasThird: 'N',
              url: 'container/containerInfo?key=0&id=0',
            }, {
              menuid: 32,
              icon: 'icon-news-manage',
              menuname: '容器SSH',
              hasThird: 'N',
              url: 'container/containerTerminal?key=0&id=0',
            }

          ],
        }, {
          menuid: 4,
          icon: 'li-icon-xiangmuguanli',
          menuname: '镜像管理',
          hasThird: null,
          url: null,
          menus: null,
        }, {
          menuid: 5,
          icon: 'li-icon-xiangmuguanli',
          menuname: '数据卷管理',
          hasThird: null,
          url: null,
          menus: null,
        }, {
          menuid: 6,
          icon: 'li-icon-xiangmuguanli',
          menuname: '网络管理',
          hasThird: null,
          url: null,
          menus: null,
        }, {
          menuid: 7,
          icon: 'li-icon-xiangmuguanli',
          menuname: '用户管理',
          hasThird: null,
          url: null,
          menus: null,
        }
      ]
    }
    let adminMenu = {

    }
    let userMenu = {

    }
    if (role == "superadmin") {
      this.allmenu = superAdminMenu.data
    } else if (role == "admin") {
      this.allmenu = adminMenu.data
    } else {
      this.allmenu = userMenu.data
    }


    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })

  }
}
</script>
<style>
.titleFont {
  font-weight: bold;
  font-size: 16px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}
</style>
